<template>
  <view class="container">
    <!-- 工具网格 -->
    <van-grid :column-num="3" :gutter="10" :border="false">
      <van-grid-item v-for="tool in tools" :key="tool.id" @click="handleToolClick(tool)">
        <template #icon>
          <van-icon :name="tool.icon" size="28" />
        </template>
        <template #text>
          <span class="tool-name">{{ tool.name }}</span>
        </template>
      </van-grid-item>
    </van-grid>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const tools = [
  { id: 1, name: '文本转义', icon: 'edit', path: '/pages/Home/index' },
  { id: 2, name: 'JSON格式化', icon: 'description', path: '/pages/Tools/json' },
  { id: 3, name: 'Base64', icon: 'code', path: '/pages/Tools/base64' },
  { id: 4, name: 'URL编码', icon: 'link', path: '/pages/Tools/url' },
  { id: 5, name: 'MD5加密', icon: 'lock', path: '/pages/Tools/md5' },
  { id: 6, name: '时间戳', icon: 'clock', path: '/pages/Tools/timestamp' },
  { id: 7, name: '二维码', icon: 'qr', path: '/pages/Tools/qrcode' },
  { id: 8, name: '颜色转换', icon: 'color', path: '/pages/Tools/color' },
  { id: 9, name: '更多工具', icon: 'more', path: '/pages/Tools/more' }
]

const handleToolClick = (tool) => {
  if (tool.path === '/pages/Home/index') {
    uni.switchTab({
      url: tool.path
    })
  } else {
    showToast({
      message: '功能开发中...',
      position: 'top',
    })
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 16px;
  box-sizing: border-box;
}

:deep(.van-grid) {
  background: transparent;
  margin-bottom: 50px;
}

:deep(.van-grid-item__content) {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
  padding: 16px 8px;
}

:deep(.van-grid-item__icon) {
  margin-bottom: 8px;
}

.tool-name {
  font-size: 14px;
  color: #323233;
}
</style> 